<template>
	<div class="container">
		<!-- 头部信息 -->
		<h3 class="header-title clearfix">
			<span class="fl"></span>
			<p class="fl">{{headerTitle}}</p>
			<p class="fr el-icon-plus" @click="edit('add')"> {{headerRight}}</p>
		</h3>
		
		<div v-if="showPage != 2">
			<!-- 中间列表页 -->
			<ul class="ban-list clearfix" v-if="showPage == 1">
				<li v-for="(item,index) in banList" :key="index" class="ban-list-item fl">
					<h3>{{item.title}}</h3>
					<img :src="item.src" alt="">
					<div class="item-bot clearfix">
						<el-button type="primary" size="mini" @click="recruit(item)">招聘管理</el-button>
						<div class="fr item-bot-opt">
							<span style="color: red;">删除</span>
							<span style="color: blue;" @click="edit('edit',item)">编辑</span>
						</div>
					</div>
				</li>
			</ul>
			<!-- 会所管理员 -->
			<clubRecManage :options="recManageData" v-if="showPage == 3"></clubRecManage>
			<!-- 设置管理员弹窗 -->
			<clubSetManage :options="clubSetManage"></clubSetManage>
			<!-- 分页器 -->
			<div class="pageBox">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="pageChange"
					:current-page.sync="cur"
					:page-sizes="[10, 20, 30, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalNum"
					background
				></el-pagination>
			</div>
		</div>
		<div v-if="showPage == 2">
			<clubAdd :options="clubData" :showPage.sync="showPage"></clubAdd>
		</div>
	</div>
</template>

<script>
export default{
	components:{
		clubAdd: () => import("../common/clubAdd.vue"),
		clubRecManage: () => import("../common/clubRecManage.vue"),
		clubSetManage: () => import("../common/clubSetManage.vue"),
	},
	data(){
		return{
			headerTitle: '月子会所管理',								//头部标题
			headerRight: '新增月子会所',								//右边添加按钮
			showPage: 1,											//显示列表还是新增页
			/* 月子会所列表页数据 */
			banList:[
				{
					title: 'MUMU月子会所',								//月子会所名称
					src: 'http://cdn3.pixhey.com/thumbs/3584689/126312000/pixhey_126312000.jpg',
					
				},
				{
					title: 'ZZZ月子会所',								//月子会所名称
					src: 'http://cdn3.pixhey.com/thumbs/3584689/126312000/pixhey_126312000.jpg',
					
				},
				{
					title: 'qqqq月子会所',								//月子会所名称
					src: 'http://cdn3.pixhey.com/thumbs/3584689/126312000/pixhey_126312000.jpg',
					
				},
				{
					title: 'qqqq月子会所',								//月子会所名称
					src: 'http://cdn3.pixhey.com/thumbs/3584689/126312000/pixhey_126312000.jpg',
					
				}
			],
			/* 新增或修改月子会所数据 */
			clubData:{												
				showForm: true,										//显示状态
				form:{												//当前选中的状态
					
				},
				userInfo: {},										//当前修改的信息
			},
			/* 招聘管理数据 */
			recManageData:{											
				
				userInfo:{											//当前会所信息
					name: '',										//姓名
				},										
			},
			clubSetManage:{
				centerDialogVisible: false,								//显示设置管理员弹窗
				
			},
			
			
			/* 分页功能数据 */
			cur:1,						//当前是第几页
			pageSize: 10,				//每页有多少条数据
			totalNum: 0,				//总共有多少条数据,根据这个数据去适配页数
		}
	},
	methods:{
		// 编辑
		edit(type,data){
			console.log(type);
			console.log(data);
			if(this.showPage == 1){
				this.showPage = 2;
				if(data){
					this.clubData.userInfo = data;
				}
			}else{
				this.clubSetManage.centerDialogVisible = true;
			}
		},
		// 招聘管理
		recruit(data){
			console.log(data);
			this.showPage = 3;
			this.recManageData.userInfo = data;
		},
		
		
		//当前页是第几页,点击的第几页的时候调用这个函数
		pageChange(p) {
			console.log(p);
			this.cur = p;
			
		},
		//每页有多少条,10,20,50等,点击选择的时候调用这个方法
		handleSizeChange (val) {
			console.log(val);
			this.pageSize = val;
			
		},
	},
	watch:{
		showPage(){
			console.log(this.showPage);
			if(this.showPage == 1){
				this.headerRight = '新增月子会所';
			}
			if(this.showPage == 3){
				this.headerTitle = this.recManageData.userInfo.title + '(招聘管理)';
				if(this.recManageData.userInfo.name){
					this.headerRight = '修改招聘管理员';
				}else{
					this.headerRight = '设置招聘管理员';
				}
			}
		}
	}
}
</script>

<style scoped="scoped">
.container{
	background-color: #fff;padding-left: 20px;
}
.header-title{
	padding: 0 0 20px 0;border-bottom: 1px solid #D2D2D2;
}
.header-title span{
	width: 15px;height: 30px;background-color: #0064E4;margin-right: 20px;
}
.header-title p{
	font-weight: bold;line-height: 30px;
}
.header-title .fr{
	margin-right: 30px;color: #0065E4;cursor: pointer;
}
.ban-list{
	width: 96%;margin: 30px auto;min-width: 1200px;
}
.ban-list-item{
	width: 30%;margin: 0 3% 20px 0;min-width: 360px;
}
.ban-list-item h3{
	line-height: 30px;
}
.ban-list-item img{
	width: 100%;height: 240px;
}
.item-bot{
	margin-top: 15px;
}
.item-bot-opt{
	line-height: 28px;
}
.item-bot-opt span{
	float: right;margin-left: 20px;font-size: 14px;cursor: pointer;
}
.pageBox{
	margin-top: 20px;
}
</style>
